<template>
  <div>
    <el-row>
      <el-col :span="8" >
        <h4 style="margin:0">
          <span>评论管理</span>
          <span v-show="checkleng.length>0">
            <el-button class="addBtn" type="success">审核通过</el-button>
            <el-button class="addBtn" type="danger">删除</el-button>
          </span>
        </h4>
      </el-col>
      <el-col :span="16" style="text-align:right">
       
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态" name="first">
        <div>
          <el-button class="addBtn" :class="{defa:activeSta}" @click="checkStatusFun(0)">未删除</el-button>
          <el-button class="addBtn" :class="{defa:!activeSta}" @click="checkStatusFun(4)">已删除</el-button>
        </div>
        <com-table v-if="navStatus==0" ref="datas" @checkFun = 'checkShowBtn'  :navStatus="navStatus"></com-table>
      </el-tab-pane>

      <el-tab-pane label="回答" name="second">
        <div>
          <el-button class="addBtn" :class="{defa:activeSta}" @click="checkStatusFun(0)">未删除</el-button>
          <el-button class="addBtn" :class="{defa:!activeSta}" @click="checkStatusFun(4)">已删除</el-button>
        </div>
        <com-table v-if="navStatus==1" ref="datas" @checkFun = 'checkShowBtn'   :navStatus="navStatus"></com-table>
      </el-tab-pane>

      <el-tab-pane label="文章" name="third">
        <div>
          <el-button class="addBtn" :class="{defa:activeSta}" @click="checkStatusFun(0)">未删除</el-button>
          <el-button class="addBtn" :class="{defa:!activeSta}" @click="checkStatusFun(4)">已删除</el-button>
        </div>
        <com-table v-if="navStatus==2" ref="datas" @checkFun = 'checkShowBtn'   :navStatus="navStatus"></com-table>
      </el-tab-pane>

      <el-tab-pane label="视频" name="fourth">
        <div>
          <el-button class="addBtn" :class="{defa:activeSta}" @click="checkStatusFun(0)">未删除</el-button>
          <el-button class="addBtn" :class="{defa:!activeSta}" @click="checkStatusFun(4)">已删除</el-button>
        </div>
        <com-table v-if="navStatus==3" ref="datas" @checkFun = 'checkShowBtn'   :navStatus="navStatus"></com-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>  
  import comTable from './Dynamic/comTable'
  export default {
    data() {
      return {
         activeName: 'first',
         checkleng:'',
        navStatus:0,
        activeSta:true,
      }
    },
    
    components:{
      comTable
    },
    mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
        
      },
      
      handleClick(tab, event) {
        this.activeSta = true;
        this.navStatus = Number(tab.index);
      },
    
       //搜索
      sheachFun(val){
        
      },
      
      checkShowBtn(val) {
        this.checkleng = val
      },
      checkStatusFun(val){
        val == 4 ? this.activeSta = false : this.activeSta = true; 
       
        this.$refs.datas.getlist(val)
      }
    }
  }
</script>
<style>
.el-tabs__nav-wrap::after{
  width:0!important;
}
.defa{
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
</style>
